<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css" />
		<!--css-->
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!--js-->
		<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="WebContent/js/messages.js" type="text/javascript" charset="utf-8"></script>-->
		<style type="text/css">
			/*body{
				
				background-size: cover;
				font-size: 17px;
			}*/
			
			.form {
				background: rgba(255, 255, 255, 0.2);
				width: 400px;
				margin: 100px auto;
			}
			
			#login_form {
				display: block;
			}
			
			#register_form {
				display: none;
			}
			
			.fa {
				display: inline-block;
				top: 27px;
				left: 6px;
				position: relative;
				color: #ccc;
			}
			
			input[type="text"],
			input[type="password"] {
				padding-left: 26px;
			}
			
			.checkbox {
				padding-left: 21px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<!--行列控制布局 行必需放进container内-->
			<div class="form row">
				<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
					<h2 class="form-title">登陆界面</h2>
					<div class="col-sm-9 clo-md-9">
						<div class="form-group">
							<i class="fa fa-user fa-lg"></i>
							<input class="form-control required" type="text" placeholder="用户名" name="username" autofocus="autofocus" maxlength="20" />
						</div>
						<div class="form-group">
							<i class="fa fa-lock fa-lg"></i>
							<input class="form-control required" type="password" placeholder="密码" name="password" maxlength="20" />
						</div>
						<div class="form-group">
							<label class="checkbox">
     						<input type="checkbox" name="remeber" value="1"/>
     						remeber me
     					</label>
							<hr />
							<a href="#" id="register_btn" class="">注册页面</a>
						</div>
						<div class="form-group">
							<input type="submit" class="btn btn-success pull-right" value="login" />
						</div>
					</div>
				</form>
			</div>
			<div class="form row">
				<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form">
					<h3></h3>
					<div class="col-sm-9 col-md-9">
						<div class="form-group">
							<i class="fa fa-user fa-lg"></i>
							<input class="form-control required" type="text" placeholder="用户名" name="username" autofocus="autofocus" />
						</div>
						<div class="form-group">
							<i class="fa fa-lock fa-lg"></i>
							<input class="form-control required" type="password" placeholder="密码" name="password" id="register_password" />
						</div>
						<div class="form-group">
							<i class="fa fa-check fa-lg"></i>
							<input class="form-control required" type="password" placeholder="重新输入你的密码" id="rpassword" />
						</div>
						<div class="form-group">
							<i class="fa fa-envelope fa-lg"></i>
							<input class="form-control email" type="text" placeholder="Email" name="email" />
						</div>
						<div class="form-group">
							<!--<input type="submit" class="btn btn-success pull-right " value="提交" />-->
							<button type="button" class="btn btn-success pull-right" id="sub-button">提交</button>
							<input type="submit" class="btn btn-info pull-left" id="back_btn" value="返回" />
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				$("#sub-button").click(function(){
					$.ajax({
						type:"post",
						url:"Register",
						async:true,
						data:$("#register_form").serialize(),
						success:function(){
							alert("注册成功！")
							window.location.href="home-page.html"
						}
					});
				});
			}
		</script>
	</body>

</html>